<template>
    <div class="home-template">
        <header class="site-header">
            <nav class="navbar navbar-static-top main-navbar" id="top">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                            data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/" class="navbar-brand brand-bootcdn text-hide">{{
                            this.webInfo.title }}</a>
                    </div>

                </div>
            </nav>
            <div class="container jumbotron">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>{{ this.webInfo.title }} </h1>
                        <p>稳定、快速、免费的 API 接口服务
                        </p>
                    </div>
                </div>
            </div>
        </header>
        <div class="layui-container">
            <div class="layui-row">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>{{ this.dateForm.title }}</legend>
                </fieldset>
                <blockquote class="layui-elem-quote">{{ this.dateForm.description }}</blockquote>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title" style="text-align: center!important;">
                    <li class="layui-this">API文档</li>
                    <li>返回码参照</li>
                    <li>示例代码</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <p class="simpleTable">
                            <span class="layui-badge layui-bg-black">接口地址：</span>
                            <span class="url" :data-clipboard-text="this.dateForm.url">{{ this.dateForm.url }}</span>
                        </p>
                        <p class="simpleTable">
                            <span class="layui-badge layui-bg-green">返回格式：</span>
                            <span class="url" :data-clipboard-text=this.dateForm.responseFormart>{{
                                this.dateForm.responseFormart }}</span>
                        </p>
                        <p class="simpleTable">
                            <span class="layui-badge">请求方式：</span>
                            <span class="url" :data-clipboard-text=this.dateForm.method>{{ this.dateForm.method
                                }}</span>
                        </p>
                        <!-- <p class="simpleTable">
                            <span class="layui-badge layui-bg-blue">请求示例：</span>
                            <span class="url"
                                data-clipboard-text="https://api.oioweb.cn/api/qq/info?qq=599928887">https://api.oioweb.cn/api/qq/info?qq=599928887</span>
                        </p> -->
                        <p class="linep">请求参数头：</p>
                        <table class="layui-table" lay-size="sm">
                            <thead>
                                <tr>
                                    <th>请求头名</th>
                                    <th>请求头值</th>
                                    <th>类型</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in this.dateForm.headers" :key="item.index">
                                    <td>{{ item.paramsName }}</td>
                                    <td>{{ item.paramsValue }}</td>
                                    <td>{{ item.paramsType }}</td>
                                    <td>{{ item.paramsDESC }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="linep">请求参数说明：</p>
                        <table class="layui-table" lay-size="sm" v-if="this.dateForm.requestBodyType == 'ParamsSubmit'">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>参数值</th>
                                    <th>类型</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in this.dateForm.subParams" :key="item.index">
                                    <td>{{ item.paramsName }}</td>
                                    <td>{{ item.paramsValue }}</td>
                                    <td>{{ item.paramsType }}</td>
                                    <td>{{ item.paramsDESC }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <pre class="layui-code layui-code-view layui-box" id="code"
                            lay-options="{about:&#39;API管理系统&#39;}"
                            v-if="this.dateForm.requestBodyType == 'JsonSubmit'"><ol class="layui-code-ol"><li>{{  this.dateForm.requestBody }}</li></ol><span class="layui-code-copy">复制</span></pre>
                        <!-- <p class="linep">返回参数说明：</p>
                        <table class="layui-table" lay-size="sm">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>nickname</td>
                                    <td>string</td>
                                    <td>QQ昵称</td>
                                </tr>
                                <tr>
                                    <td>user_id</td>
                                    <td>string</td>
                                    <td>QQ号</td>
                                </tr>
                                <tr>
                                    <td>sex</td>
                                    <td>string</td>
                                    <td>性别, male 或 female 或 unknown</td>
                                </tr>
                                <tr>
                                    <td>age</td>
                                    <td>number</td>
                                    <td>年龄</td>
                                </tr>
                                <tr>
                                    <td>qid</td>
                                    <td>string</td>
                                    <td>qid ID身份卡</td>
                                </tr>
                                <tr>
                                    <td>level</td>
                                    <td>number</td>
                                    <td>等级</td>
                                </tr>
                                <tr>
                                    <td>login_days</td>
                                    <td>number</td>
                                    <td>连续登录天数</td>
                                </tr>
                            </tbody>
                        </table> -->
                        <p class="linep">返回示例：</p>
                        <pre class="layui-code layui-code-view layui-box" id="code"
                            lay-options="{about:&#39;API管理系统&#39;}"><ol class="layui-code-ol"><li>{{ this.JSONFormartResp() }}</li></ol><span class="layui-code-copy">复制</span></pre>
                    </div>
                    <div class="layui-tab-item">
                        <p class="linep">错误码格式说明：</p>
                        <table class="layui-table" lay-size="sm">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>200</td>
                                    <td>成功</td>
                                </tr>
                                <tr>
                                    <td>400</td>
                                    <td>输入参数错误导致失败</td>
                                </tr>
                                <tr>
                                    <td>500</td>
                                    <td>服务器端出错导致失败</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-tab-item">
                        <p class="linep">代码示例：</p>
                        <pre
                            class="layui-code layui-code-view layui-box"><ol class="layui-code-ol"><li>暂无示例，有问题或者不懂请加站长交流群：611987360  获取调用方法。</li></ol><span class="layui-code-copy"><i class="layui-icon layui-icon-file-b" title="复制"></i></span></pre>
                    </div>
                </div>
            </div>

        </div>




    </div>
</template>

<script>
import { getWebInfo } from "@/api/admin/webInfo/webInfo";
import { getApiInfoById } from '@/api/api-manager/updateapi/updateapi';

export default {
    data() {
        return {
            searchKeyword: '',
            apiTitle:null,
            webInfo: {
                title: null,
                icpinfo: null,
                metaTags: []
            },
            dateForm: {
                id: null,
                title: null,
                url: null,
                description: null,
                method: null,
                responseFormart: null, // 响应方式
                requestBody: null,
                requestBodyType: 'ParamsSubmit',
                responseDemo: null,
                headers: [
                    // {
                    //   paramsName: null,
                    //   paramsValue: null,
                    //   paramsType: 'String',
                    //   paramsDESC: null,
                    // }
                ],
                subParams: [],
            },

        }
    },
    methods: {
        getWeb() {
            getWebInfo().then(response => {
                const { data } = response
                console.log(data);
                this.webInfo.title =this.apiTitle + "-" + data.title,
                this.webInfo.metaTags = [
                    { name: "keywords", content: data.keywords },
                    { name: "description", content: data.description },
                    { name: "founder", content: data.title },
                    { name: "author", content: data.author }
                ],
                    this.webInfo.icpinfo = data.icpinfo
                this.$meta().refresh();
            }).catch(error => {
                this.$message.error("获取网页数据失败")
            })
        },
        JSONFormart() {
            
            try {
                JSON.stringify(JSON.parse(this.dateForm.requestBody), null, '\t');
                debugger;
            } catch (error) {
                return this.dateForm.requestBody;
            }
            return JSON.stringify(JSON.parse(this.dateForm.requestBody), null, '\t')
        },
        JSONFormartResp() {
            try {
                JSON.stringify(JSON.parse(this.dateForm.responseDemo), null, '\t');
            } catch (error) {
                return this.dateForm.responseDemo;
            }
            return JSON.stringify(JSON.parse(this.dateForm.responseDemo), null, '\t')
        },
        InitApiInfoDate() {
            getApiInfoById(this.dateForm.id).then(response => {
                const { data } = response
                console.log(data);
                if (data == null) {
                    // 跳转列表
                    this.$router.push({ name: 'index' });
                    this.$message.error("未找到对应的API信息")
                }
                this.dateForm.id = data.id
                this.dateForm.title = data.title
                this.apiTitle = data.title
                this.dateForm.url = data.url
                this.dateForm.description = data.description
                this.dateForm.method = data.method
                this.dateForm.responseFormart = data.responseFormart// 响应方式
                this.dateForm.requestBodyType = data.requestBodyType
                this.dateForm.responseDemo = data.responseDemo
                this.dateForm.headers = JSON.parse(data.requestHeads)
                // console.log(JSON.parse(data.requestHeads));
                if (data.requestBodyType == 'ParamsSubmit') {
                    this.dateForm.subParams = JSON.parse(data.requestParams)
                }
                else if (data.requestBodyType == 'JsonSubmit') {
                    this.dateForm.requestBody = data.requestParams
                }
            }).catch(error => {
                this.$message.error(error)
            })
        }
    },
    created() {
        const id = this.$route.params.index;
        debugger;
        if (id == null) {
            this.$message.error("ID为空");
        }
        this.getWeb();
        this.dateForm.id = id
        this.InitApiInfoDate()
    },
    metaInfo() {
        return {
            title: this.webInfo.title,
            meta: this.webInfo.metaTags
        };
    }

}
</script>

<style scoped>
.url {
    word-break: break-all;
    cursor: pointer;
    margin-left: 5px;
    color: #777;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #5FB878;
}

.simpleTable {
    line-height: 20px;
    padding-bottom: 16px;
}

.linep {
    font-size: 14px;
    font-weight: 700;
    color: #555;
    padding-left: 14px;
    height: 16px;
    line-height: 16px;
    margin-bottom: 18px;
    position: relative;
    margin-top: 15px;
}

.linep:before {
    content: '';
    width: 4px;
    height: 16px;
    background: #00aeff;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 0;
}
</style>